<template>
  <div id="h5-edit">
    <el-header class="clear-ed">
      <index-header
        :options="optionsNotTp"
        @preview="onPreview"
        @saveCover="onSaveCover"
        @setting="onSetting"
      ></index-header>
    </el-header>
    <top></top>
    <main-content v-if="siteAttrs.h5Type == H5_TYPE.mobile"></main-content>
    <media-layout class="right-pop" v-if="mediaPop.isActive" :item="mediaPop.item" :isPop="true"></media-layout>
    <!-- 作品设置 -->
    <setting v-if="bIsSettingShow" @close="click2ShowSetting"></setting>
    <site-preview :isVisible="sitePreview.isActive"></site-preview>

    <div class="appkey-con">
      <el-dialog title="Appkey尚未设置" v-model="isDisplaySetAppkey">
        <p>AppKey设置 <span>（您使用了微博相关事件，因此需要设置appkey）</span></p>
        <el-input
          @input="onAppkeyChange"
          v-model="siteAttrs.wb_appkey"
          :class="{ 'is-appkey-null': bIsAppkeyNull }"
        ></el-input>
        <p class="app-key-info">
          <a
            target="_blank"
            href="https://open.xxx.com/connect"
            rel="noopener noreferrer"
            >https://open.xxx.com/connect
          </a>
          到此地址申请AppKey，如添加内部白<br />名单接口，请发邮件<a
            href="mailto:zhouheng1@staff.xxx.com"
          >
            zhouheng1@staff.xxx.com </a
          >（周恒）申请开通
        </p>
        <el-button type="primary" @click.stop="onAppkeyClose" class="margin-top-20"
          >确定</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainContent from "@/views/child/main-content.vue";
import Top from "@/views/child/top.vue";
import MediaLayout from "@/views/child/media-layout.vue";
import IndexHeader from "@/views/child/header/index-header.vue";
import RightEvents from "@/views/right/right-events.vue";
import RightPosition from "@/views/right/right-position.vue";
import RightAnimate from "@/views/right/right-animate.vue";
import RightTemplate from "@/views/right/right-template.vue";
import RightCanvasTemplate from "@/views/right/canvas/right-canvas-template.vue";
import ColorNormal from "@/views/components/edit/color-normal.vue";
import InputNormal from "@/views/components/edit/input-normal.vue";
import SliderNormal from "@/views/components/edit/slider-normal.vue";
import SwitchNormal from "@/views/components/edit/switch-normal.vue";
import DropdownNormal from "@/views/components/edit/dropdown-normal.vue";
import TextareaNormal from "@/views/components/edit/textarea-normal.vue";
import AddImgCon from "@/views/components/add-img-con.vue";
import Setting from '@/views/child/setting.vue'
import SitePreview from '@/views/child/site-preview.vue'
import { loadHtml2Canvas } from '@/store/utils/web';
import { H5_TYPE } from "@/const/";
import { useWebComponentStore } from "@/store/web/component";
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";
import { useControlsStore } from "@/store/controls";
import { useWebPageStore } from "@/store/web/page";
import { useWebSiteStore } from "@/store/web/site";
import { useWebMediaStore } from "@/store/web/media";

import { app } from "@/main";

const optionsNotTp = {
  arrBtns: [0, 1, 1, 1, 0],
  transparent: false,
};
let isSaveCover = true;
const bIsSettingShow = ref(false);
const isDisplaySetAppkey = ref(false);
const bIsAppkeyNull = ref(false);

const useControls = useControlsStore();
const useWebPage = useWebPageStore();
const useWebSite = useWebSiteStore();
const useWebComponent = useWebComponentStore();
const controls = useControls.controls;

const siteAttrs = computed(() => {
  return useWebSite.attrs;
});
const sitePreview = computed(() => {
  return useWebSite.sitePreview;
});

const useWebMedia = useWebMediaStore();
const mediaPop = computed(() => {
  return useWebMedia.mediaPop;
});
const useWebDataAnalysis = useWebDataAnalysisStore();

const click2ShowSetting = (bool: boolean) => {
  bIsSettingShow.value = bool;
};
const onSetting = () => {
  bIsSettingShow.value = true;
  useWebSite.setSitePreview({ isEditSite: true });
};
const onPreview = () => {
  let num = 0;
  _.forEach(controls, (controls_: any) => {
    let len = _.size(controls_);
    if (len > 0) {
      if (
        len == 1 &&
        (controls_.submit || controls_.smsVerification || controls_.timer)
      ) {
        //提交不需要appkey
      } else {
        num += 1;
      }
    }
  });
  if (num > 0 && useWebSite.attrs.wb_appkey.length <= 0) {
    isDisplaySetAppkey.value = true;
  } else {
    isDisplaySetAppkey.value = false;
    useWebSite.saveSiteDatas();
  }
};
const onSaveCover = () => {
  useWebComponent.deactiveCurrentComponent();
  onCover();
};
const onCover = () => {
  if (isSaveCover) {
    loadHtml2Canvas(() => {
      EventBus.$emit("sitethumb");
      isSaveCover = false;
      window.setTimeout(() => {
        isSaveCover = true;
      }, 1000);
    })
  }
};
const onAppkeyChange = () => {
  useWebSite.updateSiteAttrs(useWebSite.attrs);
  bIsAppkeyNull.value = false;
};
const onAppkeyClose = () => {
  if (useWebSite.attrs.wb_appkey.length > 0) {
    useWebSite.saveSiteDatas();
  } else {
    bIsAppkeyNull.value = true;
    return;
  }
  isDisplaySetAppkey.value = false;
};

const initComp = () => {
  if(!useWebSite.isResiterComp) {
    app.component("RightEvents", RightEvents);
    app.component("RightPosition", RightPosition);
    app.component("RightAnimate", RightAnimate);

    app.component("ColorNormal", ColorNormal);
    app.component("InputNormal", InputNormal);
    app.component("SliderNormal", SliderNormal);
    app.component("SwitchNormal", SwitchNormal);
    app.component("DropdownNormal", DropdownNormal);
    app.component("TextareaNormal", TextareaNormal);
    app.component("RightTemplate", RightTemplate);
    app.component("RightCanvasTemplate", RightCanvasTemplate);
    app.component("AddImgCon", AddImgCon);
    useWebSite.updateResiterComp(true);
  }
};

initComp();

onMounted(() => {
  useWebSite.setSitePreview({ isEditSite: true });
});

onBeforeUnmount(() => {
  useWebPage.setActivePage();
});
</script>

<script lang="ts">
import { EventBus } from "@/utils/";

export default {
  name: "h5Edit",
  created() {
    EventBus.$on("refreshMediaPop", this.onRefreshMediaPop);
  },
  methods: {
    onRefreshMediaPop() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
  },
  beforeUnmount() {
    EventBus.$off("refreshMediaPop", this.onRefreshMediaPop);
  },
};
</script>

<style lang="scss">
@import "@/assets/scss/edit.scss";
#h5-edit {
  width: 100%;
  height: 100%;
}
.right-pop {
  position: absolute;
  right: 306px;
  top: 100px;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #edeff2;
  box-shadow: 0 4px 4px 0 rgba(18, 123, 255, 0.1);
  background-color: #ffffff;
}
</style>
